import {Modal} from 'antd';
import {useEffect, useState} from 'react';
import {connect} from 'umi';
import styles from "../styles.less";

const DataForm = (props) => {
  const {dispatch} = props;
  const {execLog, setExecLog} = props.data;
  const [content, setContent] = useState("加载中");

  useEffect(() => {
    if (execLog) {
      dispatch({
        type: 'XxlJobLog/execLog',
        payload: execLog.data,
        callback: rest => {
          console.log(rest)
          setContent(rest.logContent)
        }
      });
    }
  }, [dispatch, execLog]);

  /* 取消操作 */
  function onCancel() {
    setExecLog(undefined);
    setContent("加载中");
  }

  return (
    <Modal
      title={execLog ? execLog.title : ''}
      open={execLog ? execLog.visible : false}
      onCancel={onCancel}
      forceRender={true}
      width={800}
      footer={null}
      className={styles.myModal}
      styles={{body: {maxHeight: 540, overflowY: 'auto'}}}
    >
      <div dangerouslySetInnerHTML={{__html: content}}/>
    </Modal>
  );
};


export default connect(({}) => {
  return {};
})(DataForm);

